<template>
  <main class="pug-pro-basicLayout-content pug-pro-basicLayout-has-header">
    <div class="pug-pro-page-container">
      <div class="pug-pro-page-container-warp">
        <div class="pug-page-header has-breadcrumb">
          <div class="pug-page-header-heading">
            <div class="pug-page-header-heading-left">
              <span class="pug-page-header-heading-title" title="分步表单">用户中心</span>

            </div>
          </div>
          <div class="pug-page-header-content">
            <div class="pug-pro-page-container-detail">
              <div class="pug-pro-page-container-main">
                <div class="pug-pro-page-container-row">
                  <div class="pug-pro-page-container-content">
                    用户中心页用于用户修改个人信息。
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="pug-pro-grid-content">
        <div class="pug-pro-grid-content-children">
          <div class="pug-pro-layout-watermark-wrapper" style="position: relative;">
            <div class="pug-pro-page-container-children-content">

              <div  class="pug-card mt20" v-if="shuju">
                <div class="pug-card-body">
<!--                  <div class="pug-debug-result">{{user}}</div>-->

                  <div class="pug-row" style="justify-content: center">

                    <div class="pug-col pug-col-lg-8" style="padding:0 30px;">
                      <div autocomplete="off" class="pug-form pug-form-vertical pug-form-hide-required-mark">
                        <input type="hidden" v-model="user.id" cref="id"/>

                        <div class="pug-row pug-form-item" style="row-gap: 0px;">
                          <div class="pug-col pug-form-item-label">
                            <label class="pug-form-item-required" title="文章标题">账号
                            </label>
                          </div>
                          <div class="pug-col pug-form-item-control">
                            <div class="pug-form-item-control-input">
                              <div class="pug-form-item-control-input-content">
                                <pug-input  placeholder="请输入账号"  cref="name" maxlen="128"  v-model="user.username" type="text"  disabled="disabled"></pug-input>
                              </div>
                            </div>
                          </div>
                        </div>

                        <div class="pug-row pug-form-item" style="row-gap: 0px;">
                          <div class="pug-col pug-form-item-label">
                            <label class="pug-form-item-required" title="文章标题">用户名
                            </label>
                          </div>
                          <div class="pug-col pug-form-item-control">
                            <div class="pug-form-item-control-input">
                              <div class="pug-form-item-control-input-content">
                                <pug-input  placeholder="请输入用户名" cref="nickname" maxlen="128"  v-model="user.nickname" type="text"></pug-input>
                              </div>
                            </div>
                          </div>
                        </div>

                        <div class="pug-row pug-form-item" style="row-gap: 0px;">
                          <div class="pug-col pug-form-item-label">
                            <label class="pug-form-item-required" title="头像">头像
                            </label>
                          </div>
                          <div class="pug-col pug-form-item-control">
                            <div class="pug-col   pug-col-lg-3" style="padding-left: 8px; padding-right: 8px;">
                              <pug-img @callback="uploadSuccess" modal="2" cref="img"
                                       uploadname="img" :img="user.avatar || 'https://gw.alipayobjects.com/zos/rmsportal/iZBVOIhGJiAnhplqjvZW.png'"
                                       v-model="user.avatar"></pug-img>
                              <div style="display: none"><pug-input  placeholder="请输入封面图标" cref="img"  v-model="user.avatar" type="text"></pug-input></div>
                            </div>
                          </div>
                        </div>

                        <div class="pug-row pug-form-item" style="row-gap: 0px;">
                          <div class="pug-col pug-form-item-label">
                            <label class="pug-form-item-required" title="文章标题">签名
                            </label>
                          </div>
                          <div class="pug-col pug-form-item-control">
                            <div class="pug-form-item-control-input">
                              <div class="pug-form-item-control-input-content">
                                <pug-textarea placeholder="请输入签名" cref="description" maxlen="128"  v-model="user.description"></pug-textarea>
                              </div>
                            </div>
                          </div>
                        </div>



                        <div class="pug-row pug-form-item" style="row-gap: 0px;">
                          <div class="pug-col pug-form-item-label">
                            <label class="pug-form-item-required" title="发布状态 1发布中 0未发布">性别 1:男  0:女  2:保密
                            </label>
                          </div>
                          <div class="pug-col pug-form-item-control">
                            <div class="pug-form-item-control-input">
                              <div class="pug-form-item-control-input-content">
                                <pug-radio v-model="user.male" cref="male" :items='[{text:"男",value:1},{text:"女",value:0},{text:"保密",value:2}]' :is-value="false"></pug-radio>
                              </div>
                            </div>
                          </div>
                        </div>


                        <!--保存和下一步按钮-->
                        <div class="pug-space pug-space-horizontal pug-space-align-center"
                             style="flex-wrap: wrap; gap: 8px;">
                          <div class="pug-space-item" style="">
                            <a><button  class="pug-btn pug-btn-primary mr10"  @click="saveorupdate()"><span><i class="iconfont icon-quanbudingdan pr3"></i>保存</span></button></a>
                          </div>
                          <div class="pug-space-item" style="">
                            <a><button  class="pug-btn pug-btn-primary mr10"  @click="showDialog()"><span><i class="iconfont icon-quanbudingdan pr3"></i>修改密码</span></button></a>
                          </div>

                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>



            </div>
          </div>
        </div>
      </div>
    </div>
  </main>

  <el-dialog
    title="重置密码"
    v-model="dialogflag"
    :close-on-click-modal="false"
    :before-close="dialogclose"  关闭前的回调
    :destroy-on-close="true"
    customClass="customWidth"
  >

    <div style="width: 80%;margin-left: 10%">
      <label class="pug-form-item-required" title="新密码">新密码
      </label>
      <pug-input  placeholder="请输入新密码" cref="pwd" maxlen="128"  v-model="pwd" type="password"></pug-input>
      <div style="margin: 15px 0;"></div>
      <label class="pug-form-item-required" title="确认密码">确认密码
      </label>
      <pug-input  placeholder="请输入确认密码" cref="pwdtwo" maxlen="128"  v-model="pwdtwo" type="password"></pug-input>
      <div style="margin: 15px 0;"></div>
      <el-button  ref="mySonComp"  type="primary" @click="updatePwd">保存</el-button>
    </div>
  </el-dialog>
</template>
<script>

import cache from "@/utils/cache";
import {getById, isEmpty,} from "@/utils/validate";
import pugMessage from "@/plugins/PugMessage";
import pugDialog from "@/plugins/PugDialog";
import userService from "@/services/user";
export default {
  name: "sortform",
  components: {
  },
  data() {
    return {
      pwd:"",
      pwdtwo:"",
      dialogflag: false,

      shuju:false,//数据加载完后在渲染

      user:{},

      steps: [1, 2, 3]
    }
  },

  created() {

    this.getUser()
  },


  methods: {
    async updatePwd(){
      try {
        // 校验
        const vresult = await this.validator2();
        if (!vresult) {
          return;
        }
        var that = this;
        var username = that.user.username;
        var password = that.pwd;

        // 执行服务器数据保存角色管理
        const res = await  userService.toSetPwd({username,password});
        if(res.status == 200){
          // 返回列表
          this.dialogflag = false
          this.pwd = ""
          this.pwdtwo = ""
          pugMessage.success("修改成功");
          this.$router.push("/set/info");
        }

      }catch(err){
        pugMessage.error("服务器异常,代号：1025");
      }

    },
    //保存数据
    async saveorupdate(){
      try {
        // 校验
        const vresult = await this.validator();
        if (!vresult) {
          return;
        }

        pugDialog.confirm('提示',"你确定进行【更新】吗？").then(async ()=>{
          // 执行服务器数据保存角色管理
          const res = await  userService.saveUpdateUser(this.user);
          if(res.status == 200){
            // 返回列表
            pugMessage.success("修改成功");
            this.$router.push("/set/info");
          }
        })
      }catch(err){
        pugMessage.error("服务器异常,代号：1025");
      }

    },
    //初始化用户信息
    async getUser(){
      var userid = cache.session.get("userId");
      var res = await userService.getUser(userid)
      this.user= res.data
      this.shuju = true
    },

    // 2: 校验
    async validator(){

      if(isEmpty(this.user.nickname)){
        pugMessage.error("请输入用户名");
        getById('nickname').focus();
        return false;
      }

      if(isEmpty(this.user.description)){
        pugMessage.error("请输入用签名");
        getById('description').focus();
        return false;
      }

      if(isEmpty(this.user.male)){
        pugMessage.error("请选择性别");
        getById('male').focus();
        return false;
      }

      return true;
    },

    async validator2(){

      if (isEmpty(this.pwd)) {
        pugMessage.error("新密码不能为空");
        getById('pwd').focus();
        return false;
      }

      if (isEmpty(this.pwdtwo)) {
        pugMessage.error("确认密码不能为空");
        getById('pwdtwo').focus();
        return false;
      }

      if (this.pwd != this.pwdtwo) {
        pugMessage.error("两次密码不一致");
        getById('pwd').focus();
        return false;
      }

      return true;
    },

    showDialog()  //点击按钮，显示dialog
    {
      this.dialogflag = true;
    },
    //关闭dialog
    dialogclose() {
      this.dialogflag = false;
    },


    uploadSuccess(response) {
      console.log("uploadSuccess:", response)
    },



  }
}
</script>
<style>
.customWidth{
  width:500px;
}
</style>
